<!-- 此头部为首页外的其他页面引用，首页头部特殊，代码写在首页html内部-->
<head>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1454917_xypua5jqcy.css"/>
</head>
<div class="head">
    <div class="head-inner">
        <div class="head-logo lf">
            <a href="#">
                <span>
                  <img src="images/index/logo.jpg" alt=""/>
                </span>
            </a>
        </div>
        <div class="dao-r lf">
            <ul class="head-list">
                <li class="active">
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Main business</a>
                    <div class="xl-s">
                        <div class="xl_h3">
                            <h3 class="active">ONE STOP SOLUTION</h3>
                            <h3>CHIP VALUE-ADDED SERVICES</h3>
                            <h3>PRODUCT</h3>
                            <h3>REFERENCE</h3>
                        </div>
                        <ul class="xl-list">
                            <li style="display: block">
                                <p><a href="#">AMI</a></p>
                                <p><a href="">OMS</a></p>
                                <p><a href="">ADMS</a></p>
                            </li>
                            <li>
                                <p><a href="#">AMI222</a></p>
                                <p><a href="">OMS</a></p>
                                <p><a href="">ADMS</a></p>
                            </li>
                            <li>
                                <p><a href="#">AMI333</a></p>
                                <p><a href="">OMS</a></p>
                                <p><a href="">ADMS</a></p>
                            </li>
                            <li>
                                <p><a href="#">AMI444</a></p>
                                <p><a href="">OMS</a></p>
                                <p><a href="">ADMS</a></p>
                            </li>
                        </ul>
                        <div class="both"></div>
                    </div>
                </li>
                <li>
                    <a href="#">dynamic</a>
                </li>
                <li>
                    <a href="#">introduce</a>
                </li>
                <li>
                    <a href="#">Contact us</a>
                </li>
            </ul>
            <div class="d-sou">
                <a href="#">
                    <label>
                        <i class="iconfont icon-sousuo"></i>
                    </label>
                </a>
            </div>
        </div>
    </div>
    <div class="head-phone">
        <div class="head-logo lf">
            <a href="#">
                <span><img src="images/index/logos.png" alt=""/></span>
            </a>
        </div>
        <div class="top_cen rt">
            <a href="javascript:;">
                <span></span>
                <span></span>
                <span></span>
            </a>
            <a class="cen_x active" href="javascript:;">
                ×
            </a>
        </div>
        <ul class="navlist_mo">
            <li>
                <a href="#">Home</a>
            </li>
            <li class="mo">
                <a>Main business</a>
                <ul class="abm_nav">
                    <li class="active">
                        <h3>ONE STOP SOLUTION</h3>
                        <ul>
                            <li><a href="#">AMI</a></li>
                            <li class="las"><a href="#">OMS</a>
                                <div class="last_li">
                                   <p><a href="#"> DTMS </a></p>
                                    <p><a href="#"> CTMS </a></p>
                                    <p><a href="#"> IMS </a></p>
                                    <p><a href="#"> AIS </a></p>
                                </div>
                            </li>
                            <li><a href="#">ADMS</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3>CHIP VALUE-ADDED SERVICES</h3>
                        <ul>
                            <li><a href="#">AMI22</a></li>
                            <li><a href="#">OMS</a></li>
                            <li><a href="#">ADMS</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3>PRODUCT</h3>
                        <ul>
                            <li><a href="#">AMI333</a></li>
                            <li><a href="#">OMS</a></li>
                            <li><a href="#">ADMS</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3>REFERENCE</h3>
                        <ul>
                            <li><a href="#">AMI444</a></li>
                            <li><a href="#">OMS</a></li>
                            <li><a href="#">ADMS</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">dynamic</a>
            </li>
            <li>
                <a href="#">introduce</a>
            </li>
            <li>
                <a href="#">Contact us</a>
            </li>
        </ul>
    </div>
</div>

<script>
    $(function(){
//        四级导航
        $(".las").click(function(){
            $(this).toggleClass('active')
        });
        /*导航搜索效果*/
        $('.head-list>li').on('mouseenter',function(){
            $(this).children('div').css('display','block');
        }).on('mouseleave',function(){
            $(this).children('div').css('display','none');
        });

        $('.xl_h3 h3').hover(function(){
            var liindex = $('.xl_h3 h3').index(this);
            $(this).addClass('active').siblings().removeClass('active');
            $('.xl-list li').eq(liindex).show().siblings('li').hide();
        });
        //点击切换导航栏按钮  手机端
        $('.head-phone').on('click','.top_cen a',function(){
            if($(this).attr('class')!='active'){
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
            }else{
                $(this).removeClass('active');
                $(this).siblings().addClass('active');
            }
            if($(this).attr('class')!='cen_x active'){
                $('body').css('right','50%');
                $('.nav_bg').fadeIn();
                $('.navlist_mo').css('right','0');
            }else{
                $('body').css('right','0');
                $('.nav_bg').fadeOut();
                $('.navlist_mo').css('right','-50%');
            }
        });
        //侧边栏点击切换效果  手机端
        $('.head-phone').on('click','.mo>a',function(){
            if($(this).parent().attr('class')!='mo active'){
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
            }else{
                $(this).parent().removeClass('active');
            }
        });
        /*三级*/
        $('.abm_nav li h3').on('click',function(){
            if($(this).parent().attr('class')!='active'){
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
            }else{
                $(this).parent().removeClass('active');
            }
        })

    })
</script>

